<template>
    <basic-container :btnFlag = true>
        <div class="card-border">
            <card-header :header-data="headerData"></card-header>

            <div class="step-group" v-if="projectForm.category!='A'">
                <el-steps :active="0">
                    <el-step title="申请" icon="el-icon-edit" ></el-step>
                    <el-step title="初审" icon="el-icon-upload" ></el-step>
                    <el-step title="审核" icon="el-icon-edit" class="transform-deg"></el-step>
                    <el-step title="" icon="el-icon-edit" class="transform-deg_line"></el-step>
                    <el-step title="赋码反馈(一般类、备案类)" icon="el-icon-upload" class="step-record"></el-step>
                    <el-step title="清单报批" icon="el-icon-upload" class="step-list-report"></el-step>
                    <el-step title="政府批复" icon="el-icon-picture" class="step-approval"></el-step>
                    <el-step title="赋码反馈" icon="el-icon-upload" class="step-coding"></el-step>
                </el-steps>
            </div>
            <div class="form-submit">
                <activiti-action v-if="taskId != '-1'"
                                 ref="action"
                                 :task-id="taskId"
                                 @confirm="submitConfirm"
                                 v-model="form">
                    <template slot="buttonRight">
                        <el-button type="primary" @click.stop="projectUpdateAndCommit()">提交</el-button>
                        <el-button type="info" @click.stop="goBack()">关闭</el-button>
                    </template>
                </activiti-action>
                <el-button type="warning" @click.stop="projectUpdate()" v-if="taskId == '-1'">修改</el-button>
                <el-button type="info" @click.stop="goBack()" v-if="taskId == '-1'">关闭</el-button>
            </div>

            <!--申请信息 办理过程-->
            <el-tabs class="bs-tab" v-model="activeName"
                     type="card">
                <el-tab-pane v-if="this.$route.query.registerinfoId != null" label="申请信息"
                             name="first">
                    <el-form
                            label-width="130px"
                            :model="projectForm"
                            style="padding-right: 30px;"
                            :rules="infosrules"
                            ref="projectForm">
                        <el-row style="margin-bottom: 6px;">
                            <el-col :span="22">
                                <el-form-item label="规划名称:" prop="title">
                                    <el-input v-model="projectForm.title" placeholder="请输入规划名称"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-col :span="20">
                                    <el-form-item label="规划类型:" prop="category">
                                        <el-select
                                                v-model="projectForm.category"
                                                placeholder="请选择规划类型"
                                                :disabled='true'
                                                style="width: 280px;">
                                            <el-option
                                                    v-for="item in categoryDic"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-col>
                            <el-col :span="12" style="margin-bottom: -10px;">
                                <el-col :span="20">
                                    <el-col :span="12">
                                        <el-form-item label="规划期限:" prop="startDate" style="float: left">
                                            <div>
                                                <el-date-picker
                                                        style="width: 130px"
                                                        v-model="projectForm.startDate"
                                                        type="year"
                                                        placeholder="选择年"
                                                        value-format="yyyy"
                                                        format="yyyy">
                                                </el-date-picker>
                                            </div>
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="12" style="margin-left: -40px;">
                                        <el-col :span="12">
                                            <el-form-item label="" prop="endDate" style="float: left">
                                                <div style="float: left">
                                                    <el-date-picker
                                                            style="width: 130px"
                                                            v-model="projectForm.endDate"
                                                            type="year"
                                                            placeholder="选择年"
                                                            value-format="yyyy"
                                                            format="yyyy">
                                                    </el-date-picker>
                                                </div>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="2">
                                            <h5 style="float:right">至</h5>
                                        </el-col>
                                    </el-col>
                                </el-col>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="18">
                                <el-col :span="10">
                                    <el-form-item label="申报(牵头)单位:" prop="orgCode">
                                        <!--<el-input v-model="projectForm.orgName" placeholder="请选择申报(牵头)单位"  disabled></el-input>-->
                                        <span style="font-size: 16px">{{projectForm.orgName}}</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="10">
                                    <el-button size="small" type="primary" icon="el-icon-plus" style="margin-left: 10px;" @click="clickjoint">协同编制部门</el-button>
                                </el-col>
                            </el-col>
                        </el-row>
                        <el-row v-if="projectForm.supportDeptName">
                            <el-col :span="18">
                                <el-col :span="20">
                                    <el-form-item label="协同编制部门:" class="orgcodecss">
                                        {{projectForm.supportDeptName}}
                                    </el-form-item>
                                </el-col>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-col :span="20">
                                    <el-form-item label="拟发布层级:" prop="planningLevel">
                                        <el-select
                                                v-model="projectForm.planningLevel"
                                                placeholder="请选择"
                                                style="width: 280px">
                                            <el-option
                                                    v-for="item in planningLevelDic"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-col>
                            <el-col :span="12">
                                <el-col :span="20">
                                    <el-form-item label="拟发布时间:" prop="releaseDate">
                                        <el-date-picker
                                                style="width: 100%"
                                                v-model="projectForm.releaseDate"
                                                type="month"
                                                placeholder="选择年月"
                                                value-format="yyyy-MM"
                                                format="yyyy-MM"
                                                @change="gettime()">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-col :span="20">
                                    <el-form-item label="审批机关级别:" prop="approvingAuthorityLevel">
                                        <el-select
                                                v-model="projectForm.approvingAuthorityLevel"
                                                placeholder="请选择"
                                                style="width: 280px;">
                                            <el-option
                                                    v-for="item in authorityLevelDic"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-col>
                            <el-col :span="12">
                                <el-col :span="20">
                                    <el-form-item label="审批机关性质:" prop="approvingAuthorityNature">
                                        <el-select
                                                v-model="projectForm.approvingAuthorityNature"
                                                placeholder="请选择"
                                                style="width: 280px;">
                                            <el-option
                                                    v-for="item in natureDIC"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-col :span="20">
                                    <el-form-item label="联系人:" prop="contactName">
                                        <el-input v-model="projectForm.contactName" placeholder="请输入联系人"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-col>
                            <el-col :span="12">
                                <el-col :span="20">
                                    <el-form-item label="联系电话:" prop="contactNumber">
                                        <el-input v-model="projectForm.contactNumber" placeholder="请输入联系电话"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="22">
                                <el-form-item label="经费来源:" prop="financialSource">
                                    <el-input
                                            type="textarea"
                                            :autosize="{ minRows: 2, maxRows: 4}"
                                            placeholder="请输入经费来源"
                                            v-model="projectForm.financialSource">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="22">
                                <el-form-item label="立项依据:" prop="basis">
                                    <quill-editor ref="basisEditor"
                                                  v-model="projectForm.basis"
                                                  :content="basisContent"
                                                  :options="basisOption">
                                    </quill-editor>
                                    <el-upload
                                            class="uploadFile"
                                            action="string"
                                            :limit="1"
                                            :on-exceed="tipFileOne"
                                            :http-request="basisSubmitUploadMixin"
                                            :on-change="basisFileChangeMixin"
                                            :on-preview="basishandlePreviewMixin"
                                            :on-remove="basishandleRemoveMixin"
                                            :auto-upload="true"
                                            :file-list="basisFileListMixin">
                                        <el-button size="small" type="primary">附件上传</el-button>
                                        <div slot="tip" class="el-upload__tip" style="margin-top: -8px;">请上传依据材料</div>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="22">
                                <el-form-item label="主要内容:" prop="content">
                                    <quill-editor ref="contentEditor"
                                                  v-model="projectForm.content"
                                                  :content="content"
                                                  :options="editorOption">
                                    </quill-editor>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div class="form-group form-padding" style="margin-bottom: 4rem;margin-top: 0rem;">
                        <span class="form-label-small" style="float: left;margin-right: -21px;">相关材料:</span>
                        <el-upload
                                class="upload-demo"
                                ref="upload"
                                action="string"
                                :http-request="submitUploadMixin"
                                :on-preview="handlePreviewMixin"
                                :on-remove="handleRemoveMixin"
                                :file-list="fileListMixin"
                                :auto-upload="true"
                                :on-change="fileChangeMixin">
                            <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
                            <!--<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
                            <div slot="tip" class="el-upload__tip" style="margin-top: 6px;margin-left: 80px;">上传工作方案、工作计划等相关材料</div>
                        </el-upload>
                    </div>
                </el-tab-pane>
                <el-tab-pane v-if="taskId != '-1'"
                             label="办理过程"
                             name="second">
                    <process-handle-history :task-id="taskId"/>
                </el-tab-pane>
              <el-tab-pane  label="会商意见"
                           name="third">
                <el-tabs v-model="topicActiveName" style="padding: 12px;margin-top:20px;" v-if="msgFlag">
                  <el-tab-pane
                    :label="item.deptName"
                    :name="String(item.topicId)"
                    v-for="(item,index) in msgList"
                    :key="index">
                    <msg-nobtn :msg-data="msgDataListTemp"></msg-nobtn>
                    <el-pagination
                      @size-change="sizeChange"
                      @current-change="onLoad"
                      :current-page="pageTemp.currentPage"
                      :page-size="pageTemp.pageSize"
                      :total="pageTemp.total"
                      :page-sizes="[10, 20, 30, 40 ,50 ,100]"
                      layout="total, sizes, prev, pager, next, jumper"
                      v-if="msgDataListTemp.length>0"
                      class="paginationcss">
                    </el-pagination>
                    <div v-if="msgDataListTemp.length<=0" style="text-align: center;
          font-size: 18px;
          margin-top: 28px;">暂无数据</div>
                  </el-tab-pane>
                </el-tabs>
                <div v-if="!msgFlag" style="text-align: center;font-size: 18px;margin-top: 20px;">
                  暂无数据</div>
              </el-tab-pane>
              <el-tab-pane label="会办流程"
                           name="fourth">
                <div v-for="item in jointlyHandleList" v-if="jointlyHandleList != null">
                  <jointly-handle-div v-if="item.processId != null"
                                      type="JOINTLY_HANDLE_TYPE_REGISTER_FGW"
                                      :business-key="$route.query.registerinfoId"
                                      :process-id="item.processId">
                  </jointly-handle-div>
                </div>
              </el-tab-pane>
            </el-tabs>


            <xieorg-tree :orgCodeVisiblesubmit="xieorgCodeVisiblesubmit" :checkedKeys="projectForm.supportDeptIdList" @orgCodeClick="xieorgCodeClick" @orgCodeHandleClosesubmit="xieorgCodeHandleClosesubmit" @orgCodeCheckChange="xieorgCodeCheckChange"></xieorg-tree>
            <org-tree :orgCodeVisiblesubmit="orgCodeVisiblesubmit" @orgCodeClick="orgCodeClick" @orgCodeHandleClosesubmit="orgCodeHandleClosesubmit"></org-tree>
            <area-tree :areaCodeVisiblesubmit="areaCodeVisiblesubmit" @areaCodeClick="areaCodeClick" @areaCodeHandleClosesubmit="areaCodeHandleClosesubmit"></area-tree>
        </div>
    </basic-container>
</template>
<script>
    import { PROJECT_DIC } from "@/const/dict";
    import {projectRules} from "@/const/infoRules";
    import { projectDetail, projectUpdate,projectUpdateAndSubmit} from "@/api/planning/project";
    import {UploadFile,filedownload,getfileinfo,getfileinfopage} from "@/api/system";
    import relatedfile from "@/mixins/relatedfile";
    import basisfile from "@/mixins/basisfile";
    import registerDetail from "@/components/registerinfo/registerDetail"
    import processHandleHistory from "@/components/activiti/history/processHandleHistory";
    import activitiAction from "@/components/activiti/action"
    import { taskComplete } from "@/api/activiti/monitor";

    import { mapGetters } from "vuex"
    import getDetailData from "@/mixins/getDetailData";
    import chatMsg from '@/components/bostech/chat-msg'
    import MsgNobtn from "../../../components/bostech/msg-nobtn";
    import jointlyHandleDiv from "@/components/activiti/jointly-handle-button/jointlyHandleDiv";
    import {pageProcess} from '@/api/activiti/monitor';
    import {messagePage} from '@/api/planning/message'
//    import {getfileinfopage} from "@/api/system";
    let stageMap = {
      'A':0,
      'B':1,
      'C':2,
      'D':3,
      'E':5,
      'F':6,
      'G':6,
      'H':8,
      'I':9
    };
    export default {
        name: "regEdit",
        mixins:[relatedfile,basisfile,getDetailData()],
        components:{
            registerDetail,
            processHandleHistory,
            activitiAction,
            jointlyHandleDiv,
            MsgNobtn,
            chatMsg
        },
      watch: {
        'topicActiveName'(val) {
          this.topicIdTemp = val;
          this.onLoadFortabs();
        }
      },
        data() {
            return {
                activeName: 'first',
                listId: null,
                filenametemp:'',
                idsarray: '',  //附件id数组，用于相关材料多个附件传给详情组件
                multiplefiles:[],  //多个文件的信息
                headerData: {
                    title: "浙江省海洋主题功能区规划"
                },
                taskId:'',
                categoryDic: PROJECT_DIC.CATEGORY,
                content: '',
                editorOption:{
                    // something config
                    modules:{
                        toolbar:null
                    },
                    placeholder:'请输入主要内容'
                },
                basisContent: '',
                basisOption:{
                    // something config
                    modules:{
                        toolbar:null
                    },
                    placeholder:'请输入立项依据'
                },
                orgCodeVisiblesubmit:false,//申报单位树弹框标志
                areaCodeVisiblesubmit:false,//地区代码树弹框标志
                xieorgCodeVisiblesubmit:false,//协同部门树弹窗标志
                planningLevelDic: PROJECT_DIC.PLANNING_LEVEL,
                authorityLevelDic: PROJECT_DIC.APPROVING_AUTHORITY_LEVEL,
                natureDIC: PROJECT_DIC.APPROVING_AUTHORITY_NATURE,
                dialogVisible: false,
                infotype: "",
                value: "",
                textcontent: "",
                radio: "",
                basisfileList: [],
                projectForm: {
                    fileId:null,
                    basisFileId:null,
                },
                basisfilename:'',
                infosrules: projectRules,
                form:{},
                msgList:[],
                topicActiveName: null,
                jointlyHandleList:null,
                msgFlag:false,
                topicIdTemp:0,
                msgDataListTemp:[],
                page: {
                  total: 0, // 总页数
                  currentPage: 1, // 当前页数
                  pageSize: 10 // 每页显示多少条
                },
                pageTwo: {
                  total: 0, // 总页数
                  currentPage: 1, // 当前页数
                  pageSize: 10 // 每页显示多少条
                },
                pageTemp: {
                  total: 0, // 总页数
                  currentPage: 1, // 当前页数
                  pageSize: 10 // 每页显示多少条
                },
            };
        },
        created() {
            this.taskId = this.$route.params.id;
            this.getDetailData();
            this.getJointlyHandleList()

            projectDetail(this.$route.query.registerinfoId).then(response => {
                if (response.data.code == "0") {
                    let records = response.data.data;
                    this.projectForm = records;

                    let basisFileId = this.projectForm.basisFileId;
                    this.setfilelist(basisFileId,'basis');

                    let fileId = this.projectForm.fileId;
                    this.setfilelistrelated(fileId);

                    this.projectForm.startDate = this.dateChange(records.startDate);
                    this.projectForm.endDate = this.dateChange(records.endDate);
                    let supportDeptName = '';
                    for(let i in this.projectForm.supportDeptNameList){
                        supportDeptName += this.projectForm.supportDeptNameList[i] + ','
                    }
                    this.projectForm.supportDeptName = supportDeptName;
                    this.headerData.title = records.title;
                    this.categoryDic = this.categoryDic.filter(
                        item => item.value == records.category
                    );
                }
            });
        },
        computed: {
          ...mapGetters([
            "userInfo"
          ]),
            editor () {
                return this.$refs.contentEditor.quill
            },
            basisEditor () {
                return this.$refs.basisEditor.quill
            }
        },
        mounted () {
            // 设置编辑器高度
            this.editor.container.style.height = '200px';
            this.basisEditor.container.style.height = '200px'
        },

        methods: {
          getJointlyHandleList(){
            console.log("registerinfoId:"+this.$route.query.registerinfoId)
            pageProcess(Object.assign({
              current:1,
              size:-1,
              filterByAdminRole: false,
              businessKey:this.$route.query.registerinfoId,
              processKey:'planning-register-fgw'
            })).then(response =>{
              if(response.data.code == 0){
                this.jointlyHandleList = response.data.data.records
              }
            })
          },
            // 返回首页
            goHome() {
                this.$router.push({ path: "/wel" });
            },
            goBack() {
                this.$router.go(-1);
            },
            dateChange(date) {
                if (date) {
                    date = new Date(Date.parse(date));
                    let newDate = date.getFullYear() + "-" + (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)) + "-" + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
                    return newDate ;
                }
            },
            // 年份获取发布时间的年份
            gettime() {
                let date = this.projectForm.releaseDate.split("-");
                this.projectForm.year = parseInt(date[0])
            },
            open4() {
                const h = this.$createElement;
                this.$msgbox({
                    title: "请填写依据",
                    message: h("p", null, [
                        h(
                            "textarea",
                            {
                                style:
                                    'width:100%;height:60px;border:1px solid #9B9B9B;required="required";'
                            },
                            "依据"
                        )
                    ]),
                    showCancelButton: true,
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    beforeClose: (action, instance, done) => {
                        if (action === "confirm") {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = "执行中...";
                            setTimeout(() => {
                                done();
                                setTimeout(() => {
                                    instance.confirmButtonLoading = false;
                                }, 300);
                            }, 3000);
                        } else {
                            done();
                        }
                    }
                }).then(action => {
                    this.$message({
                        type: "info",
                        message: "action: " + action
                    });
                });
            },
            uploadBefore(file, done, loading) {
                done();
                this.$message.success("上传前的方法");
            },
            uploadAfter(res, done, loading) {
                done();
                this.$message.success("上传后的方法");
            },
            handleSubmit(form) {
                this.$message.success(JSON.stringify(this.form));
            },
            handleClose(done) {
                this.$confirm("确认关闭？")
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            // 修改
            projectUpdate() {
                let arr=[];
                this.idsarray='';
                if(this.fileListMixin.length!=0){
                    for(let item in this.fileListMixin){
                        arr.push(this.fileListMixin[item].url);
                    }
                    this.idsarray = arr.join(",");
                }
                this.projectForm.fileId = this.idsarray;
                this.$refs.projectForm.validate(valid => {
                    if (valid) {
                        this.projectForm.startDate = this.projectForm.startDate.split('-')[0];
                        this.projectForm.endDate = this.projectForm.endDate.split('-')[0];
                        if(parseInt(this.projectForm.startDate)>parseInt(this.projectForm.endDate)){
                            this.$notify({
                                title: "提醒",
                                type: "warning",
                                message: "规划期限开始时间不能大于结束之间",
                                duration: 2000
                            });
                            return;
                        }
                        projectUpdate(this.projectForm).then(response => {
                            if (response.data.code == 0) {
                                this.$notify({
                                    title: "成功",
                                    message: "修改成功",
                                    type: "success",
                                    duration: 2000
                                });
                                this.$router.go(-1);
                            }
                        });
                    }
                });
            },
            // 修改并提交
            projectUpdateAndCommit(){
                let arr=[];
                this.idsarray='';
                if(this.fileListMixin.length!=0){
                    for(let item in this.fileListMixin){
                        arr.push(this.fileListMixin[item].url);
                    }
                    this.idsarray = arr.join(",");
                }
                this.projectForm.fileId = this.idsarray;

                this.$refs.projectForm.validate(valid => {
                    if (valid) {
                        this.projectForm.startDate = this.projectForm.startDate.substring(0,4);
                        this.projectForm.endDate = this.projectForm.endDate.substring(0,4);
                        projectUpdateAndSubmit(this.projectForm).then(response => {
                            if (response.data.code == 0) {
                                this.$notify({
                                    title: "成功",
                                    message: "提交成功",
                                    type: "success",
                                    duration: 2000
                                });
                                this.$router.go(-1);
                            }
                        });
                    }
                });
            },

            //申报单位点击事件
            orgCodeClick(data){
                this.projectForm.orgCode = data.id;
                this.projectForm.orgName = data.name;
                this.orgCodeVisiblesubmit = false
            },
            //申报单位关闭事件
            orgCodeHandleClosesubmit(){
                this.orgCodeVisiblesubmit = false
            },
            //地区代码树点击事件
            areaCodeClick(data){
                this.projectForm.areaCode = data.value.substring(0,6);
                this.areaCodeVisiblesubmit = false
            },
            //地区代码关闭事件
            areaCodeHandleClosesubmit(){
                this.areaCodeVisiblesubmit = false
            },
            clickjoint(){
                this.xieorgCodeVisiblesubmit = true
            },
            xieorgCodeClick(){},
            xieorgCodeHandleClosesubmit(){
                this.xieorgCodeVisiblesubmit = false
            },
            xieorgCodeCheckChange(data){
                this.projectForm.supportDeptName = '';
                this.projectForm.supportDeptIds = '';
                for(let i in data){
                    this.projectForm.supportDeptName += data[i].name + ',';
                    this.projectForm.supportDeptIds += data[i].id + ','
                }
            },
            // 下载文件
            download (data,filename) {
                if (data==null) {

                }else{
                    let url = window.URL.createObjectURL(new Blob([data]));
                    let link = document.createElement('a');
                    link.style.display = 'none';
                    link.href = url;
                    link.setAttribute('download',filename );
                    document.body.appendChild(link);
                    link.click()
                }
            },

            setfilelist(fileId,type){
                if(fileId!=null&&fileId!=undefined&&fileId != '') {
                    getfileinfo(fileId).then(response => {
                        if (response.data.code == 0) {
                            if (response.data.data != null) {
                                let filenametemp = response.data.data.fileName + "." + response.data.data.extend;
                                if (type == 'basis') {
                                    this.basisFileListMixin = [{name: filenametemp, url: fileId}];
                                    this.projectForm.basisFileId = fileId;
                                    this.basisfilename = filenametemp;
                                }

                            }
                        }
                    })
                }
            },

            async setfilelistrelated(fileIds){
                this.projectForm.fileId=fileIds;
                if(fileIds!="" && fileIds!=null){
                    await  getfileinfopage(Object.assign({
                        current: 1,
                        size: 100,
                        fileIds:fileIds
                    })).then(response => {
                        let records = response.data.data.records;
                        if(records.length!=0){
                            for(let item in records){
                                if(records[item]!=null){
                                    this.fileListMixin.push({name: records[item].fileName+records[item].extend, url: records[item].fileId})
                                }
                            }
                        }
                    }).catch(
                    )
                }
            },

            //动作
            submitConfirm(validActionForm, stopLoading, closeDialog) {
                validActionForm((actionFormValid, object) => {
                    this.validateForm((valid) => {
                        if (valid && actionFormValid) {
                            let params = this.form;
                            taskComplete(this.taskId, params).then(response => {
                                if (response.data.code == 0) {
                                    this.$notify({
                                        title: '成功',
                                        message: '提交成功',
                                        type: 'success',
                                        duration: 2000
                                    });
                                    closeDialog();
                                    this.goBack();
                                }
                            }).finally(() => {
                                stopLoading();
                            });
                        } else {
                            this.formValidateErrorNotify();
                            stopLoading();
                        }
                    })
                });
            },
            formValidateErrorNotify () {
                this.$notify({
                    title: '错误',
                    message: '表单存在错误，请按提示修改',
                    type: 'error',
                    duration: 2000
                });
            },
            validateForm (callback) {
                if (this.$refs.form != null) {
                    this.$refs.form.validate((valid, object) => {
                        callback(valid, object);
                    });
                } else {
                    if (callback != null) {
                        callback(true);
                    }
                }
            },
          // 获取详情信息
          getDetailData(){
            projectDetail(this.$route.query.registerinfoId).then(response => {
              this.getResultDetail(response);
            })
          },
          async  getResultDetail(response){

            if(response.data.code == '0') {
              let records = response.data.data;
              if(records.fileId!="" && records.fileId !=null) {
                this.multipleFiles = [];
                this.multipleFiles = await this.getFileInfoPageTemp(records);
              }
              this.stageActive = stageMap[records.stage];
              if ((records.planningRank == 'C' || records.planningRank == 'B') && records.stage == 'H') {
                this.stageActive = 5;
                this.cssbeian = true;
              }

              this.getDetailDataMins(records);
              if(records.registerinfoTopicVOList.length>0){
                this.msgFlag = true;
                for(let i in records.registerinfoTopicVOList){
                  this.getMessage(records.registerinfoTopicVOList[i],i);
                }
              }
            }
          },
          getFileInfoPageTemp(records){
            return new Promise((resolve, reject) => {
              if(records.fileId!="" && records.fileId !=null){
                getfileinfopage(Object.assign({
                  current: 1,
                  size: 100,
                  fileIds:records.fileId
                })).then(response => {
                  let multipleFiles = response.data.data.records;
                  resolve(multipleFiles);
                }).catch(
                )
              }
            })
          },
          getMessage(obj,item){
            //默认得到第一个数据
            if (item == 0) {
              messagePage(Object.assign({
                current: 1,
                size: 10,
                topicId: obj.topicId,
                ascs: 'send_time'
              })).then(response => {
                if (response.data.code == 0) {
                  let record = response.data.data.records;
                  let pageTemp = {};
                  pageTemp.currentPage = response.data.data.current;
                  pageTemp.pageSize = response.data.data.size;
                  pageTemp.total = response.data.data.total;
                  this.topicActiveName = String(obj.topicId); //tabs默认显示第一个部门
                  this.topicIdTemp = obj.topicId;
                  this.pageTemp = pageTemp;

                  this.putList(record, obj.deptName, obj.topicId, this.pageTemp);
                }
              });
            } else {
              let record = null;
              this.putList(record, obj.deptName, obj.topicId, this.pageTemp);
            }

          },
          putList(record,deptName,topicId,pageTemp){
            this.msgListTemp=[];

            if(record!=null){
              this.recursive(record);    //递归消息放入消息列msgListTemp中
            }

            let msgMap = {
              deptName:deptName,
              msgDataList:this.msgListTemp,
              topicId:topicId,
              pageTemp:pageTemp,
            };
            if(record!=null){
              this.msgDataListTemp = msgMap.msgDataList;
            }

            this.msgList.push(msgMap)
          },
          recursive(record,deptName){
            for(let i in record){
              let flag = false;
              if(record[i].senderId == this.userInfo.userId){
                flag = true
              }
              let msgDataMap = {
                orgName:record[i].senderNickname,
                nickName:record[i].senderNickname?record[i].senderNickname.substring(0,2):'',
                msgTime:record[i].sendTime,
                msgContent:record[i].content,
                replyFlag:flag,
                senderId:record[i].senderId,
                topicId:record[i].topicId,
                messageId:record[i].messageId,
                rightaway: record[i].parentId !== null?1:0,
                fileId:record[i].fileId,
                filenametemp:record[i].fileFullName,
              };
              this.msgListTemp.push(msgDataMap);
              if(record[i].children!==null){ //当还有子消息时继续递归
                this.recursive(record[i].children);
              }
            }
          },
          //当点击显示第几页时触发
          onLoad(page){
            this.currentTemp=page;
            messagePage(Object.assign({
              current: page,// 当前页数
              size: this.pageSizeTemp,// 每页显示多少条
              topicId:this.topicIdTemp,
              ascs:'send_time'
            })).then(response => {
              if (response.data.code == 0) {
                let record = response.data.data.records;
                this.putList(record);
              }
            })
          },
          //当每页显示的条数改变时触发
          sizeChange(page){
            messagePage(Object.assign({
              current: 1,// 当前页数
              size: page,// 每页显示多少条
              topicId:this.topicIdTemp,
              ascs:'send_time'
            })).then(response => {
              if (response.data.code == 0) {
                let record = response.data.data.records;
                this.putList(record);
              }
            })
          },
          onLoadFortabs(){
            messagePage(Object.assign({
              current: 1,// 当前页数
              size: 10,// 每页显示多少条
              topicId:this.topicIdTemp,
              ascs:'send_time'
            })).then(response => {
              if (response.data.code == 0) {
                let record = response.data.data.records;
                this.pageTwo.currentPage = response.data.data.current;
                this.pageTwo.pageSize = response.data.data.size;
                this.pageTwo.total = response.data.data.total;
                this.pageTemp = this.pageTwo;
                this.putListForpage(record);
              }
            })
          },
          putListForpage(record){
            this.msgListTemp=[];
            if(record!=null){
              this.recursive(record);    //递归消息放入消息列msgListTemp中
            }
            if(record!=null){
              this.msgDataListTemp = this.msgListTemp;
            }
          },


        }
    };
</script>


<style lang="scss" scoped>
    .step-title {
        display: inline-block;
        border-bottom: solid #ec950a;
        padding-bottom: 10px;
        font-weight: 600;
    }
    .step-button {
        float: right;
    }
    .step-img {
        width: 25px;
        position: relative;
        left: 0px;
        top: 7px;
    }
    /*.step-group {*/
    /*margin: 5rem 0;*/
    /*}*/
    .form-group {
        margin-top: 2rem;
    }

    .form-label {
        font-weight: 600;
        margin-right: 2rem;
    }

    .form-padding {
        padding-left: 50px;
    }

    .form-label-small {
        font-size: 14px;
        margin-right: 12px;
        display: inline-block;
        min-width: 101px;
    }

    .form-submit {
        text-align: right;
    }

    /*.card-border {*/
    /*border: 1px solid #d2d2d2;*/
    /*padding: 12px;*/
    /*}*/
    .remarksbtn {
        border-radius: 6px;
        padding: 5px 4px;
        margin-left: 10px;
    }
    .ql-upload{
        background: url("../../../../public/img/user.png");
        background-size: 16px 16px;
        background-position: center center;
        background-repeat:no-repeat;
        /*background: red;*/
    }


    .ql-toolbar.ql-snow {
        border: 1px solid #ccc;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
        padding: 0 8px;
    }
    .ql-container.ql-snow{
        height: 12rem;
    }
    .ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button {
        background: url("../../../../public/img/upload.png");
        background-size: 16px 16px;
        background-position: center center;
        background-repeat:no-repeat;
        border: none;
        cursor: pointer;
        display: inline-block;
        float: left;
        height: 24px;
        padding: 3px 5px;
        width: 28px;
    }

    /*流程图样式*/
    .card-border{
        /*padding: 50px 10px;*/
        border: 1px solid #d2d2d2;
        .step-group {
            margin: 4rem 0 40px;
            .transform-deg{
                .el-step__line {
                    transform: rotate(-14deg);
                    margin-top: -17px;
                }
            }
            .transform-deg_line {
                margin-left: -145px;
                .el-step__line{
                    transform: rotate(16deg);
                    margin-top: 17px;
                }
            }
            /deep/.step-record{
                margin-top: -50px;
                margin-left: 24px;
                .el-step__title{
                    width: 200px;
                }
                .el-step__line{
                    display: none;
                }
            }
            .step-list-report{
                margin-top: 35px;
                margin-left: -200px;
            }
            .step-approval{
                margin-top: 35px;
            }
            .step-coding{
                margin-top: 35px;
            }
        }
    }
    .paginationcss{
      margin-top: 20px;
      float: right;
      margin-right: 28px;
    }
</style>
